

{include file='common/header.html'}
<!-- 内容主体区域 -->
<div class="layui-body">
  <!--        <div style="padding: 15px;"><h1 style="font-weight: 700">欢迎界面</h1></div>-->
  <div id="user_container" style="padding: 15px;">
    <!--            面包屑导航-->
    <span class="layui-breadcrumb">
              <a href="#" style="font-weight: 700;color: #000!important;">首页</a>
              <a href="#" style="font-weight: 700;color: #000!important;">图书管理</a>
              <a href="" >图书分类</a>
            </span>
    <div class="layui-row layui-col-space15" style="margin-top: 15px">
      <div class="layui-col-md12">
        <div class="layui-panel" style="padding: 20px">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <input id="searchVal" style="float: left" type="text" placeholder="请输入编号/名称查找" autocomplete="off" class="layui-input">
              <button id="search" style="float: left;margin-left: -1px;outline: none;" type="button" class="layui-btn  "><i class="layui-icon layui-icon-search"></i></button>
              <button data-target="#myModal" data-toggle="modal"  id="addBook" type="button" style="border-radius: 5px;width: 90px;cursor:pointer;margin-left: 20px;" class="layui-btn layui-btn-radius layui-btn-normal">添加分类</button>
            </div>
          </div>
          <table lay-filter="bookListTable"  class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加分类</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputBookCategory" class="col-sm-2 control-label">分类名称:</label>
            <div class="col-sm-10">
              <input name="name" type="text" placeholder="请输入分类名称" class="form-control" id="inputBookCategory" >
            </div>
          </div>
          <input type="hidden" name="id">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sureBtn" data-dismiss="modal" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

<!--状态模板字符-->
<script type="text/html" id="currentTableBar">
  <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>
</script>


<script>
   document.querySelector('.layui-nav-itemed').classList.remove('layui-nav-itemed');
  $('a[href$=category]').parent()[0].classList.add('layui-this');
  $('a[href$=category]').parent().parent().parent()[0].classList.add('layui-nav-itemed');

  var formhorizontal  = document.querySelector('.form-horizontal')
  var sureBtn = document.getElementById('sureBtn');
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;


    // 顶部搜索逻辑
    var search = document.getElementById('search');
    var searchVal = document.getElementById('searchVal');
    search.addEventListener('click',function () {
      console.log(searchVal.value)
      table.reload('bookTable', {
        where: { //设定异步数据接口的额外参数，任意设
          name: searchVal.value
        }
        ,page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    })


    // 渲染表格
    table.render({
      elem: '#currentTableId',
      limit:4
      ,url: "{:url('/admins/category/article')}" //数据接口
      ,page: true //开启分页
      ,limits:[2,4,6,8]
      ,skin: 'row,line'
      ,id:'bookTable'
      ,cols: [[ //表头
        {field: 'category_id', align:"center", width:120, title: '分类ID', sort: true},
        {field: 'category_name',align:"center", title: '名称'},
        {title: '操作', minWidth: 150, align:"center",toolbar: '#currentTableBar', align: "center"}
      ]],

    });


    // 添加图书信息表格
    var addBook = document.getElementById('addBook');
    var myModalLabel = document.getElementById('myModalLabel');
    var tableReload = table.reload;


    addBook.addEventListener('click', function (){
      formhorizontal.reset();
    })

    sureBtn.addEventListener('click',async function (e) {
        const {data: res} = await axios.post('/admins/category/addBook', {
              bname:formhorizontal.name.value,
              create_at:(new Date()).valueOf()
        })
        // console.log(res)
        if (res.state !== 200) {
          return layer.msg(res.message, {
            icon: 0,
            time: 1000
          })
        }
        table.reload('bookTable', {});
        layer.msg('添加成功', {
          icon: 1,
          time: 1500
        })
    })

    // 编辑删除绑定事件
    table.on('tool(bookListTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if(layEvent === 'delete'){ //删除
        layer.confirm('该操作将会永久删除该用户是否继续？',{icon: 3, title:'提示'}, async function(index){
          await axios.get(`/admins/category/delete?id=${data.category_id}`)
          table.reload('bookTable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
          });
          layer.close(index);
          //向服务端发送删除指令
        });
      }
    });

  });



</script>


{include file='common/footer.html'}
